﻿@using AyBorg.Diagrams.Components

<MudCard Class="rounded-lg mud-full-height mud-full-width">
	<MudCardHeader>
		<CardHeaderAvatar>
			<MudIcon Icon="@Icons.Material.Filled.Hub" />
		</CardHeaderAvatar>
		<CardHeaderContent>
			<MudText Typo="Typo.h6">Automation</MudText>
		</CardHeaderContent>
		<CardHeaderActions>
            <MudButtonGroup Variant="Variant.Filled" Color="Color.Default" DisableElevation>
                <MudTooltip Text="Center view">
                    <MudIconButton Icon="@Icons.Material.Filled.FilterCenterFocus" OnClick="@OnCenterViewClicked" />
                </MudTooltip>
                <MudTooltip Text="Zoom in">
                    <MudIconButton Icon="@Icons.Material.Filled.ZoomIn" OnClick="@OnZoomInClicked" />
                </MudTooltip>
                <MudTooltip Text="Zoom reset">
                    <MudIconButton Icon="@Icons.Material.Filled.ZoomOutMap" OnClick="@OnZoomResetClicked" />
                </MudTooltip>
                <MudTooltip Text="Zoom out">
                    <MudIconButton Icon="@Icons.Material.Filled.ZoomOut" OnClick="@OnZoomOutClicked" />
                </MudTooltip>
            </MudButtonGroup>
		</CardHeaderActions>
	</MudCardHeader>
	<MudCardContent Style="height: calc(100% - 70px)" Class="pt-0 mt-3">
		<div Class="diagram-container" dropzone="none" ondragover="event.preventDefault();" @ondragenter="OnDragEnter"
			@ondrop="OnDrop">
			<CascadingValue Value="_diagram">
				<DiagramCanvas Class="grid">
				</DiagramCanvas>
			</CascadingValue>
		</div>
	</MudCardContent>
</MudCard>
